<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框broder 内间距padding</title>
  <style>
    .d1{
      width: 200px;
      height: 200px;
      background-color: #0aa1ed;
      border: 5px solid #f00;
      /*设置单方向的边框*/
      border-top: 5px dotted #0f0;
      /*  边框圆角 值越大 角越大
      长宽为正方形宽高的一半可以切成圆形*/
      border-radius: 100px ;
    }
    .d2{
        width: 200px;
        height: 200px;
        border: 5px solid #f0f;
        padding-left: 50px;
        padding-top: 50px;
        /*将盒子模型计算方案切换为边框盒子
        效果：边框，内间距，内容都算在预设的with和height值中*/
        box-sizing: border-box;
        /*外间距不属于元素本身的大小，但是会占据页面布局空间*/
        margin: 60px;
    }
    span{
        border: 3px solid #ff0000;
    }
    .s2{
        /*行内元素垂直方向的内外间距都不生效，不要用！！！*/
        padding: 50px;
    }
  </style>
</head>
<body>
<div class="d1"></div>
<div class="d2">内间距测试</div>
<hr>
<span>span1</span><span class="s2">span2</span><span>span3</span>
</body>
</html>